<template>
	<view class="main-box">
		<div class="form-box">
			<view class="title-box">
				审批
			</view>
			<up-button style="width: 50px;margin: 0;" type="primary" @click="add('submit')">新增</up-button>
			<up-form labelPosition="top" labelWidth="100%">
				<up-form-item v-for="(item,index) in submitData">
					<up-textarea :disabled="!item.isEdit" v-model="item.value" placeholder="请输入审批意见"></up-textarea>
					<view class="tool-btn" v-if="!item.isEdit">
						<up-button size="mini" type="primary" @click="edit(item.guid,true)">编辑</up-button>
						<up-button size="mini" type="error" @click="showModal(item.guid,'submit')">删除</up-button>
						<up-button size="mini" type="warning"
							@click="updateApprove('update', 'submit', item.guid, item.value, '1')"
							:style="`opacity:${item.state != 1?'1':'0'}`"
							:disabled="item.state != 1?false:true">设为默认</up-button>
					</view>
					<view class="tool-btn" v-else>
						<up-button size="mini" type="primary"
							@click="updateApprove('update', 'submit', item.guid, item.value,item.state)">确定</up-button>
						<up-button size="mini" @click="edit(item.guid,false)">取消</up-button>
						<!-- 用于占位，不做展示 -->
						<up-button size="mini" type="warning" style="opacity:0" :disabled="true">设为默认</up-button>
					</view>
				</up-form-item>
			</up-form>
		</div>
		<div class="form-box">
			<view class="title-box">
				退回
			</view>
			<up-button style="width: 50px;margin: 0;" type="primary" @click="add('rollback')">新增</up-button>
			<up-form labelPosition="top" labelWidth="100%">
				<up-form-item v-for="(item,index) in backData">
					<up-textarea :focus="true" :disabled="!item.isEdit" v-model="item.value"
						placeholder="请输入审批意见"></up-textarea>
					<view class="tool-btn" v-if="!item.isEdit">
						<up-button size="mini" type="primary" @click="edit(item.guid,true)">编辑</up-button>
						<up-button size="mini" type="error" @click="showModal(item.guid,'submit')">删除</up-button>
						<up-button size="mini" type="warning" :style="`opacity:${item.state != 1?'1':'0'}`"
							:disabled="item.state != 1?false:true"
							@click="updateApprove('update', 'submit', item.guid, item.value, '1')">设置默认</up-button>
					</view>
					<view class="tool-btn" v-else>
						<up-button type="primary"
							@click="updateApprove('update', 'submit', item.guid, item.value,item.state)">确定</up-button>
						<up-button @click="edit(item.guid,false)">取消</up-button>
						<!-- 用于占位，不做展示 -->
						<up-button size="mini" type="warning" style="opacity:0" :disabled="true">设为默认</up-button>
					</view>
				</up-form-item>
			</up-form>
		</div>
		<up-modal :showCancelButton="true" :show="deleteModal" @confirm="updateApprove('delete',deleteType,deleteId)"
			@cancel="deleteModal=false" content='确定要删除这条快捷输入吗？'></up-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getApprovalOpinions,
		editApprovalOpinions
	} from "@/api"
	onLoad(() => {
		uni.showLoading({
			title: '加载中'
		});
		uni.setNavigationBarTitle({
			title: '快捷输入管理'
		});
		getAllData()

	})
	let getAllData = () => {
		let userInfo = uni.getStorageSync('userInfo') || {};
		getApprovalOpinions(userInfo.userId + ":submit").then(res => {
			if (res.code == '200') {
				submitData.splice(0, submitData.length);
				let list = JSON.parse(res.data);
				console.log(list);
				submitData.push(...list)
			}
			uni.hideLoading();
		}).catch(err => {
			console.log(err);
			uni.hideLoading();
		})
		getApprovalOpinions(userInfo.userId + ":rollback").then(res => {
			if (res.code == '200') {
				backData.splice(0, backData.length);
				let list = JSON.parse(res.data)
				backData.push(...list)
			}
			uni.hideLoading();
		}).catch(err => {
			console.log(err);
			uni.hideLoading();
		})
	}
	let submitData = reactive([])
	let backData = reactive([])

	// 编辑和取消编辑
	let edit = (id, value) => {
		let index = submitData.findIndex(item => {
			return item.guid == id
		})
		if (index != -1) {
			submitData[index].isEdit = value;
		}
		if (!value) {
			getAllData()
		}
	}
	let add = (type) => {
		if (type == 'submit') {
			submitData.unshift({
				guid: "",
				value: "",
				isEdit: true,
				state: false
			})
		} else {
			backData.unshift({
				guid: "",
				value: "",
				isEdit: true,
				state: false
			})
		}
	}
	let deleteModal = ref(false);
	let deleteId = ref("");
	let deleteType = ref('');
	// 删除弹窗显示
	let showModal = (id, type) => {
		deleteModal.value = true;
		deleteId.value = id;
		deleteType.value = type;
	}
	let updateApprove = (option, type, id, value, state) => {
		let userInfo = uni.getStorageSync('userInfo') || {};
		let obj = {
			option: option,
			userid: userInfo.userId,
			approveType: type,
			approveOpinion: value,
			guid: id,
		}
		if (state) {
			obj.state = state
		}
		if (option == 'update' && value == "") {
			uni.showToast({
				title: "内容不能为空",
				icon: "none",
			})
			return false
		}
		uni.showLoading({
			title: '加载中'
		});
		editApprovalOpinions(obj).then(res => {
			console.log(res, '3');
			if (res.code == '200') {
				deleteModal.value = false;
				if (option == 'delete') {
					uni.showToast({
						title: "删除成功",
						icon: "none",
					})
				} else {
					uni.showToast({
						title: "操作成功",
						icon: "none",
					})
				}
				getAllData()
			}
			uni.hideLoading();
		}).catch(err => {
			console.log(err);
			uni.hideLoading();
		})
	}
</script>

<style scoped lang="scss">
	.tool-btn {
		margin: 0 10px;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.main-box {
		height: calc(100vh - 45px);
		box-sizing: border-box;
		padding: 10px 0 70px;
		background-color: #F5F5F6;
	}

	.title-box {
		font-size: 18px;
		font-weight: 600px;
		padding: 10px 0;
	}

	.form-box {
		width: calc(100% - 20px);
		margin: 10px auto;
		background: #fff;
		padding-left: 10px;
		box-sizing: border-box;
		border-radius: 15px;
	}
</style>